<!-- 维护检验子项 -->
<script setup lang='ts' name="MaintenanceChecks">
import {ref, reactive, onMounted, watch, onActivated} from 'vue'
import {HeaderData} from '@/components/dTable/dTable'
import {OperButton, SearchFromItem, SearchButton} from '@/components/dTable/dHeader'
import {PageConfig, defaultPage, defaultPageSize, defaultPageSizes, defaultLayout} from '@/components/dTable/dFooter'
import dTablePromote from '@/components/dTable/dTablePromote.vue'
import pageContainer from '@/components/pageContainer.vue'
import operation from '@/components//dTable/components/operation.vue'
import popUp  from './popup.vue'
import { ElMessage, ElMessageBox, FormRules} from 'element-plus'
import { Normal, NoChinese, NotLeadingAndTrailingSpaces} from '@/util/common'
import { inspectItemList, inspectItemDelete, TableDataList, searchDataList} from '@/api/instrument/examine'
import { ColorTheme, ColorRed} from '@/api/config'
import {useRoute} from 'vue-router'
const route = useRoute()


const searchData = reactive<searchDataList>({
  page: 1, // 默认页码
  limit:10, // 默认每页条数
  instrumentId:'', // 仪器id
  itemName:'', // 检验子项名称
  itemCode:'' // 检验子项编码
})

// 弹窗显示
const popShowa = ref(false)

const operationData = [
  {code:'del', label:'删除', iconConfig:{icon:'common-delete', type:'custom', color:ColorRed, size:20}}
]

//数据
const tableData = ref<Array<TableDataList>>([])
//表格数据
const tableHeaderData = ref<Array<HeaderData>>([
  {prop:'itemCode', label:'检查项目编码', columnType:'text', align:'left', 'min-width':'100'},
  {prop:'itemName', label:'检查项目名称', columnType:'text', align:'left', 'min-width':'100'},
  {prop:'enShortName', label:'英文简称', columnType:'text', align:'left', 'min-width':'100'},
  {prop:'operation', label:'操作', columnType:'slot', 'min-width':'20', fixed:'right'}
])
//底部
const pageConfig = ref<PageConfig>({
  currentPage:defaultPage,
  pageSize:defaultPageSize,
  pageSizes:defaultPageSizes,
  total:0,
  disabled:false,
  layout:defaultLayout
})

// 筛选区功能
const searchFromItems = ref<Array<SearchFromItem>>(
  [
    {label:'检查项目名称', placeholder:'请输入检查项目名称', type:'input',  prop:'itemName', enterSubmit:true},
    {label:'检查项目编码', placeholder:'请输入检查项目编码', type:'input',  prop:'itemCode', enterSubmit:true}
  ]
)

const searchFromData = reactive<searchDataList>({itemName:'', itemCode:'',  instrumentId:''})

const searchFromRules = reactive<FormRules>({
  itemName:[
    {required:false, message:'长度应小于50个字符', max:50, trigger: ['change', 'blur']},
    { required: false, message: '首尾不能为空', pattern:NotLeadingAndTrailingSpaces, trigger: ['change', 'blur']}
  ],
  itemCode:[
    {required:false, message:'长度应小于50个字符', max:50, trigger: ['change', 'blur']},
    { required: false, message: '请输入字母、数字、符号', pattern:NoChinese, trigger: ['change', 'blur']},
    { required: false, message: '首尾不能为空', pattern:NotLeadingAndTrailingSpaces, trigger: ['change', 'blur']}
  ]
})


// 查询接口 查询维护检查设备分页
const Ifinstrumentpage = () => {
//  searchData.instrumentId = route.query0.id
  inspectItemList(searchData).then(res => {
    pageConfig.value.total = Number(res.data.data.total)
    res.data.data.records.map(item => {
      item.operation = operationData
    })
    tableData.value = res.data.data.records
  })
}


const IfinspectItemDelete = (id:string) => {
  inspectItemDelete({instrumentId:searchData.instrumentId as string, inspectItemId:id}).then(res => {
    if (res.data.code === 200) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      Ifinstrumentpage()
    }
  })
}

//表头
const operButtons = ref<Array<OperButton>>([
  {label:'新增', type:'noraml', iconConfig:{icon:'plus', type:'el'}, code:'add'}
])



// 按钮搜索配置
const serachButtons = ref<Array<SearchButton>>([
  {type:'search'},
  {type:'clear'}
])

// 提交搜索
const onSubmit = () => {
  searchData.itemName  = searchFromData.itemName
  searchData.itemCode  = searchFromData.itemCode
  Ifinstrumentpage()
}

const onFormClear = () => {
  searchData.itemName  = ''
  searchData.itemCode  = ''
  Ifinstrumentpage()
}

const onOperation = (name:string) => {
  switch (name) {
  case 'add':
    popShowa.value = true
    break
  }
}


const onSizeChange = () => {
  searchData.limit = pageConfig.value.pageSize
  Ifinstrumentpage()
}

const onCurrentChange = () => {
  searchData.page = pageConfig.value.currentPage
  Ifinstrumentpage()
}


// 操作栏点击事件
const onErtion = (err, row) => {
  switch (err) {
  case 'del':
    ElMessageBox.confirm(
      '是否确认删除检查项目:' + row.itemName,
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
      .then(() => {
        IfinspectItemDelete(row.id)
      })
      .catch(() => {
        console.log('')
      })
    break
  }


}

// 弹窗取消
const onCancel = () => {
  popShowa.value = false
}

// 弹窗关闭
const onClose = () => {
  popShowa.value = false
}

// 弹窗保存
const onConfirm = () => {
  popShowa.value = false
  Ifinstrumentpage()

}

// watch(
//   () => route.query,
//   () => {
//     const str = route.query ? route.query : {}
//     if (!route.query.id) return
//     searchData.instrumentId = str.id as string
//     Ifinstrumentpage()
//   }
// )

// 生命周期
onMounted(() => {
  const str = route.query ? route.query : {}
  if (!route.query.id) return
  searchData.instrumentId = str.id as string
  Ifinstrumentpage()
})

onActivated(() => {
  const str = route.query ? route.query : {}
  if (!route.query.id) return
  searchData.instrumentId = str.id as string
  Ifinstrumentpage()
})
</script>

<template>
  <page-container>
    <d-table-promote
      :oper-buttons="operButtons"
      :search-form-items="searchFromItems"
      :search-buttons="serachButtons"
      :table-data="tableData"
      :table-header-data="tableHeaderData"
      :page-config="pageConfig"
      :search-from-justify="'flexStart'"
      :show-index="true"
      :search-form-data="searchFromData"
      :search-rules="searchFromRules"
      :label-width="100"
      :force-show-button="true"
      :show-footer="true"
      @form-submit="onSubmit"
      @operation="onOperation"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      @form-clear="onFormClear"
    >
      <template #operation="scope">
        <operation :row="scope.row" :col="scope.item" @opertion-click="onErtion" />
      </template>
    </d-table-promote>
  </page-container>
  <pop-up
    v-if="popShowa"
    :show-dialog="popShowa"
    :gp-id="''+ searchData.instrumentId"
    :table-data="tableData"
    @cancel="onCancel"
    @confirm="onConfirm"
    @close="onClose"
  />
</template>

<style scoped>
.test-con{
  margin: 50px;
}
.test-tablecon{
  height: 500px;
  width: 100%;
  /* width: 800px; */
}
.test-box{
  height: 20px;
  background-color:rgba(128, 0, 128, 0.5);
  border-radius: 5px;
}
</style>